<div class="person-container">
  <div class="container">
    <div class="head">
      <div class="left">
        修改密码
      </div>
      <div class="right">
        <a (click)="comeBack()">返回</a>
      </div>
    </div>
    <div class="content">
      <div class="card">
        <!-- <nz-input-group [nzSuffix]="suffixTemplate"> -->
        <div class="card-list" nz-row>
          <div nz-col nzSpan=3>
            原密码
          </div>
          <div nz-col nzSpan=18>
            <nz-input-group [nzSuffix]="suffixTemplate">
            <input #oldPassWord placeholder="请输入原密码" maxlength="50" nz-input [(ngModel)]="oldPassword" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" [type]="oldpasswordVisible ? 'text' : 'password'" 
            (keyup)="CheckOldValue()" [ngStyle]="{'border-color':oldPasswordError?'red':'#DDDDDD'}">
            </nz-input-group>
            <ng-template #suffixTemplate>
            <i nz-icon [nzType]="oldpasswordVisible ? 'eye-invisible' : 'eye'" (click)="oldpasswordVisible = !oldpasswordVisible" style="cursor: pointer"></i>
            </ng-template>
          </div>
          <div nz-col nzSpan=2 nzOffset="1">
            <i nz-icon *ngIf="oldPasswordError === false" nzType="check-circle" nzTheme="outline" style="color: green"></i>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzOffset="3" style="margin-top: -26px;">
            <span *ngIf="oldPasswordError === true" style="font-size: 8px;color: red">
                <i nz-icon nzType="close-circle" nzTheme="outline"></i>
                 {{oldPasswordMessage}}
            </span>
          </div>
        </div>
        <div class="card-list" nz-row>
          <div nz-col nzSpan=3>
            新密码
          </div>
          <div nz-col nzSpan=18>
            <nz-input-group [nzSuffix]="suffixTemplate1">
            <input maxlength="50" #newPassWord placeholder="请输入新密码，支持6~50位字母/数字/符号组合" nz-input [(ngModel)]="newPassword" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" [type]="newpasswordVisible ? 'text' : 'password'"
            (keyup)="CheckNewValue()" [ngStyle]="{'border-color':newPasswordError?'red':'#DDDDDD'}">
          </nz-input-group>
          <ng-template #suffixTemplate1>
          <i nz-icon [nzType]="newpasswordVisible ? 'eye-invisible' : 'eye'" (click)="newpasswordVisible = !newpasswordVisible" style="cursor: pointer"></i>
          </ng-template>
          </div>
          <div nz-col nzSpan=2 nzOffset="1">
            <i nz-icon *ngIf="newPasswordError === false" nzType="check-circle" nzTheme="outline" style="color: green"></i>
          </div>
        </div>
        <div nz-row>
            <div nz-col nzOffset="3" style="margin-top: -26px;">
              <span *ngIf="newPasswordError === true" style="font-size: 8px;color: red">
                  <i nz-icon nzType="close-circle" nzTheme="outline"></i>
                   {{newPasswordMessage}}
              </span>
            </div>
          </div>
        <div class="card-list" nz-row>
          <div nz-col nzSpan=3>
            确认密码
          </div>
          <div nz-col nzSpan=18>
            <nz-input-group [nzSuffix]="suffixTemplate2">
            <input maxlength="50" #confirmPassWord placeholder="请输入新密码，支持6~50位字母/数字/符号组合" nz-input [(ngModel)]="newPasswordConfirm" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" [type]="passwordVisible ? 'text' : 'password'"
            (keyup)="CheckConfirmValue()" [ngStyle]="{'border-color':newPasswordConfirmError?'red':'#DDDDDD'}">
          </nz-input-group>
          <ng-template #suffixTemplate2>
          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible" style="cursor: pointer"></i>
          </ng-template>
          </div>
          <div nz-col nzSpan=2 nzOffset="1">
            <i nz-icon *ngIf="newPasswordConfirmError === false" nzType="check-circle" nzTheme="outline" style="color: green"></i>
          </div>
        </div>
        <div nz-row>
            <div nz-col nzOffset="3" style="margin-top: -26px;">
              <span *ngIf="newPasswordConfirmError === true" style="font-size: 8px;color: red">
                  <i nz-icon nzType="close-circle" nzTheme="outline"></i>
                   {{newPasswordConfirmMessge}}
              </span>
            </div>
          </div>
      <!-- </nz-input-group>
          <ng-template #suffixTemplate>
          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template> --> 
        <div class="card-function">
          <button nz-button nzType="default" (click)="reset()">重置</button>
          <button nz-button nzType="primary" style="margin-left: 20px" (click)="preservation()">保存</button>
        </div>
      </div>
      <span class="hiddenLeft" (click)='async1()'> </span> <span class="hiddenRight" (click)='async2()'> </span>
    </div>
  </div>
</div>